<template>
    <div class="about">
        <el-button @click="dialogFormVisible = true">添加</el-button>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="roles.rName" label="角色名称" width="120"> </el-table-column>
            <el-table-column prop="powers.wName" label="拥有权限" width="120"> </el-table-column>
            <el-table-column prop="roles.remark" label="具体描述" width="120"> </el-table-column>
        </el-table>
        <el-dialog :visible.sync="dialogFormVisible">
            <el-tree ref="tree" :data="data" show-checkbox node-key="wId" :props="defaultProps"> </el-tree>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="Add()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { Show, Shows, Add } from '@/api/rolepowers';
export default {
    data() {
        return {
            dialogTableVisible: false,
            dialogFormVisible: false,
            tableData: [],
            multipleSelection: [],
            data: [],
            id: [],
            defaultProps: {
                children: 'wList',
                label: 'wName',
                value: 'wId'
            },
            formLabelWidth: '120px',
            model: {
                rId: '',
                wId: ''
            }
        };
    },
    mounted() {
        this.Show();
        Shows().then((d) => {
            this.data = d.data;
        });
    },
    methods: {
        handleSelectionChange(val) {
            this.multipleSelection = val;
            this.id = this.multipleSelection.map((x) => x.rId);
            console.log(this.id);
        },
        getCheckedKeys() {
            console.log(this.$refs.tree.getCheckedKeys());
        },
        Show() {
            Show().then((d) => {
                this.tableData = d.data;
            });
        },
        Add() {
            this.model.rId = this.id[0];
            this.model.wId = this.$refs.tree.getCheckedKeys().toString();
            console.log(this.model);
            Add(this.model).then((d) => {
                if (d.data > 0) {
                    alert('添加成功!');
                    this.dialogFormVisible = false;
                    this.Show();
                } else {
                    alert('添加失败!');
                }
            });
        },
    }
};
</script>
